<template>

    <div>
        <!-- 显示弹出添听力、阅读、录音、创作 -->
        <el-dialog title="请选择" :visible.sync="visible" :before-close="handleClose" width="40%" center>
            <el-row>
                <el-col :span="4" v-for="(item, index) in infoList" :key="index" :offset="index > 0 ? 2 : 0">
                    <div style="text-align: center;" @click="selectMaterial(item.type)">
                        <img src="@/assets/img/kanke/task/circle.png" class="image"
                            style="width: 100px;height: 100px;border-radius: 50px;">
                        <div style="padding: 14px;">
                            <span style="font-size: 24px;font-weight: bold;">{{ item.name }}</span>
                        </div>
                    </div>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
            </span>
        </el-dialog>

        <!-- 创作 -->
        <div v-if="showCreateVisible">
            <show-create :visible.sync="showCreateVisible" :current_day="current_day"></show-create>
        </div>

        <!-- 阅读、听力、录音等选择 -->
        <div v-if="showAddCourseWareVisible">
            <show-add-course-ware :visible.sync="showAddCourseWareVisible" :edit_task_courseware_arr="[]"
                :task_type="task_type" :current_day="current_day" @handleSelectFiles="handleSelectFiles"></show-add-course-ware>
        </div>


    </div>

</template>

<script>
import ShowCreate from "./ShowCreate";
import ShowAddCourseWare from "@/views/kanke/textbook/courseware/components/ShowAddCourseWare";
export default {
    name: "ShowContentPop",
    components: {
        ShowCreate,
        ShowAddCourseWare
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        current_day: {
            type: String,
            default: "taskFirstDay"
        }
    },
    data() {
        return {
            showCreateVisible: false,
            showAddCourseWareVisible: false,
            task_type: 0,
            infoList: [
                { 'name': '听力', 'type': 1 },
                { 'name': '阅读', 'type': 2 },
                { 'name': '录音', 'type': 3 },
                { 'name': '创作', 'type': 4 },
            ],
        }
    },
    mounted() {
    },
    methods: {
        handleClose() {
            this.$emit('update:visible', false);
        },
        selectMaterial(type) {
            //1听力 2阅读 3.录音 4.创作
            switch (type) {
                case 1:
                    this.task_type = 1;
                    this.showAddCourseWareVisible = true;
                    break;
                case 2:
                    this.task_type = 2;
                    this.showAddCourseWareVisible = true;
                    break;
                case 3:
                    this.task_type = 3;
                    this.showAddCourseWareVisible = true;
                    break;
                case 4:
                    this.task_type = 4;
                    this.showCreateVisible = true;
                    break;
                default:
                    break;
            }
        },
        handleSelectFiles(val) {
            console.log('---当前选中的文件---', val);
            console.log('---当前任务类型', this.task_type);
            var task_type = this.getTaskType(this.task_type);
            if (val.length > 0) {
                for (let i = 0; i < val.length; i++) {
                    val[i].task_type = task_type;
                    val[i].current_day = this.current_day;
                    let content = val[i];
                    this.$store.commit('EDIT_TASK_DAY', content);
                }
            }
            this.msgSuccess('保存成功');
        },
        getTaskType(task_type) {
            //1听力 2阅读 3.录音 4.创作
            switch (task_type) {
                case 1:
                    return "listen";
                    break;
                case 2:
                    return "read";
                    break;
                case 3:
                    return "record";
                    break;
                case 4:
                    return "create";
                    break;
                default:
                    break;
            }
        }
    }

}
</script>

<style lang="scss" scoped>
::v-deep .el-dialog__header {
    background: white;
}
</style>